<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>
        Fish
        <ul>
          <li>trout</li>
          <li>salmon</li>
        </ul>
      </li>
      <li>
        Tree
        <ul>
          <li>
            Huge
            <ul>
              <li>sequoia</li>
              <li>oak</li>
            </ul>
          </li>
          <li>
            Flowering
            <ul>
              <li>apple tree</li>
              <li>magnolia</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

    <div id="list"></div>
    <script>
      let data = {
        Fish: {
          trout: {},
          salmon: {},
        },
        Tree: {
          Huge: {
            sequoia: {},
            oak: {},
          },
          Flowering: {
            "apple tree": {},
            magnolia: {},
          },
        },
      };
      /*
      1. 递归输出每一个属性
      2. 使用列表包裹属性
      */
      function treeList(data) {
        // 保存拼接的字符
        treeList.str = treeList.str || "";
        // 对象属性转换成数组
        const keys = Object.keys(data);
        // 判断对象是否为空
        if (keys.length !== 0) {
          treeList.str += "<ul>";
          keys.forEach((el) => {
            treeList.str += `<li>${el}</li>`;
            // treeList(data[el]);
          });
          treeList.str += "</ul>";
        }
        return treeList.str;
      }
      //   console.log(treeList(data));
      document.getElementById("list").innerHTML = treeList(data);
    </script>
  </body>
</html>
